import BaseChart from '@/components/echarts/BaseChart';
import type { StoreInfo } from '@/Interface/StoreInfoInterface';
import { useBasicDataStore } from '@/stores/basicDataStore';
import { fontSizeRem } from '@/utils/fontSizeRem';
import type { EChartsOption } from 'echarts';
import 'echarts-liquidfill';


const Promotion = () => {

  const basicData = useBasicDataStore(status => status.basicData) as StoreInfo

  // 转换数据结构为数组
  const promotionList = Object.entries(basicData.annualData.promotions);

  const revenues: string[] = []
  const profits: string[] = []
  promotionList.forEach((holiday) => {
    revenues.push(((holiday[1].revenue / 10000).toFixed(2)))
    profits.push(((holiday[1].profit / 10000).toFixed(2)))
  })

  const colorList = ["#597EF7", "#36CFC9"];

  const options: EChartsOption = {
    title: {
      text: '收入与利润分析',
      top: '5%',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: fontSizeRem(14),
      }
    },
    backgroundColor: '',
    grid: {
      top: '25%',
      left: '5%',
      right: '5%',
      bottom: '0%',
      containLabel: true,
    },
    color: colorList,
    legend: {
      icon: 'circle',
      right: '5%',
      top: '5%',
      show: true,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 28,
      textStyle: {
        color: '#fff',
        fontSize: fontSizeRem(12),
      },
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      data: ['春节', '劳动节', '国庆节', '暑期'],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff',
        }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#fff',
        fontSize: fontSizeRem(12),
      },
    },
    yAxis: [{
      type: 'value',
      name: '金额 (万元)',
      nameTextStyle: {
        color: "#fff",
        fontSize: fontSizeRem(12),
      },
      axisLabel: {
        color: '#fff',
        fontSize: fontSizeRem(12),
      },
      splitLine: {
        "show": false,   //网格线
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff',
        }
      },
    }],
    series: [
      {
        name: '收入',
        type: 'bar',
        barWidth: '20',
        data: revenues,
      },
      {
        name: '利润',
        type: 'bar',
        barWidth: '20',
        data: profits,
      }
    ],
  }

  return (
    <>
      <div style={{ width: '100%', height: '20vh' }}>
        <BaseChart option={options} />
      </div>
    </>
  );
};

export default Promotion;